<template>
    <div class="login-page lg:gap-10 xl:gap-12 2xl:gap-[248px]">
        <!-- mt-[304px] -->
        <section class="-mt-[144px] hidden lg:block">
            <div class="flex flex-row items-center gap-4">
                <img src="/images/logo.png" alt="logo" :width="48" :height="48" class="size-12 block object-cover" />
                <span class="font-bold text-theme text-[40px] !leading-12">智聘</span>
            </div>
            <p class="font-bold text-theme text-[48px] !leading-12 tracking-[1px] mt-2">专为HR招聘赋能提效</p>
            <p class="font-normal text-[#4A5565] text-[22px] !leading-[30px] tracking-[3px] mt-2">省时50%的招聘革命，让AI为你精准选才</p>
        </section>
        <!-- mt-[160px] -->
        <section class="box-border w-[460px] h-max bg-white rounded-lg drop-shadow-[0_4px_40px_rgba(46,41,77,0.08)] px-[50px]">
            <!-- 登录 -->
            <GpLoginForm class="!mt-[72px]" @success="handleLoginSuccess" v-if="formMode === FormMode.Login"/>
            <!-- 创建企业 -->
            <GpCreateCompanyForm class="!mt-[40px] !mb-[40px]" :action="registerAction" @success="handleCreateOrJoinSuccess" @switch="formMode = FormMode.Join" v-else-if="formMode === FormMode.Create"/>
            <!-- 加入已有企业 -->
            <GpJoinCompanyForm class="!mt-[80px] !mb-[112px]" :action="joinAction" @success="handleCreateOrJoinSuccess" @switch="formMode = FormMode.Create" v-else-if="formMode === FormMode.Join"/>
        </section>
    </div>
</template>
<script lang="ts" setup>
import { postEnter, postRegister } from '@/api/siderBar/home';
import type { CompanyLoginResult } from '@/api/siderBar/model';
import { IndexPage } from '@/router';
import { useUserStore } from '@/stores';
type RouteParams = {
    redirected?: string
}
defineOptions({
    name: "Login"
})
definePage({
    name: 'Login',
    meta: {
        title: '登录',
        isLayout: false
    }
})
enum FormMode {
    Login,
    Create,
    Join
}
const router = useRouter()
const userStore = useUserStore()
const formMode = ref<FormMode>(FormMode.Login)
const loginRet = ref<CompanyLoginResult>()
onBeforeRouteLeave((_, __, next) => {
    setAuthWarningToasted(false)
    next()
})
async function afterLogin(token: string) {
    setStorageToken(token)
    await userStore.getUserInfo()
    const { redirected } = <RouteParams>router.currentRoute.value.query
    router.replace(redirected ?? { name: IndexPage })
}
function handleLoginSuccess(data: CompanyLoginResult) {
    if (data.token) {
        afterLogin(data.token)
    } else {
        loginRet.value = data
        formMode.value = FormMode.Create
    }
}
function registerAction(values: Partial<{
    name: string
    company: string
    scale: string
    position: string
}>) {
    return postRegister({
       companyName: values.company!,
       identity: loginRet.value!.identity!,
       userName: values.name!,
       userPosition: values.position!,
       companyScale: values.scale!
    }).then(data => {
        loginRet.value = data
    })
}
function joinAction(values: Partial<{
    name: string
    companyCode: string
}>) {
    return postEnter({
       identity: loginRet.value!.identity!,
       inviteCode: values.companyCode!,
       userName: values.name!
    }).then(data => {
        loginRet.value = data
    })
}
function handleCreateOrJoinSuccess() {
    afterLogin(loginRet.value!.token!)
}
</script>
<style lang="less" scoped>
.login-page {
    width: 100%;
    // min-width: 1920px;
    height: 100vh;
    background-image: url(/images/login-page-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    // gap: 248px;
}
</style>